<template>
  <div class="userHome" id="userHome">
      <div class="top-relative" :class="{'no-auth-height':userInfo.idAuth!='Y'}">
        <header-bar :type="headerType" slideIn="1" :opacity="opacity" :title="fixShow?userInfo.nickName:''"></header-bar>
        <div class="tabs fixed" v-show="fixShow" :style="'top:'+headerHeight+'rem'">
            <div class="tab-item" :class="{'active':current==1}" @click="tab(1)">
                在售商品<span>{{userInfo.onSaleNum}}</span> 
                
            </div>
            <div class="tab-item" :class="{'active':current==2}" @click="tab(2)">
                已卖出商品<span>{{userInfo.sellNum}}</span> 
            </div>
        </div>
        <div class="top-model" :class="{'no-auth-height':userInfo.idAuth!='Y'}">
            <div class="header-icon">
                <img :src="userInfo.userIcon">
            </div>
            <p class="user-num">{{userInfo.nickName}}</p>
            <p class="describe">{{userInfo.yearDivisor?userInfo.yearDivisor+'后，':''}}{{userInfo.constellation?userInfo.constellation+'，':''}}加入闲巢{{userInfo.totalDays}}天{{userInfo.location?'，常居住'+userInfo.location:''}}</p>
            <p class="auth" v-if="userInfo.idAuth=='Y'">
                    <img src="~@/assets/imgs/account/auth_icon.png">
                    已认证
            </p>
        </div>
        <div class="top-bg" :class="{'no-auth-height':userInfo.idAuth!='Y'}" :style="{'background':'url('+userInfo.userIcon+') center center no-repeat'}">
        </div>
      </div>
      <div class="tabs" ref="tab">
          <div class="tab-item" :class="{'active':current==1}" @click="tab(1)">
              在售商品<span>{{userInfo.onSaleNum}}</span> 
              
          </div>
          <div class="tab-item" :class="{'active':current==2}" @click="tab(2)">
              已卖出商品<span>{{userInfo.sellNum}}</span> 
          </div>
      </div>
      <div class="padding15" ref="goods">
          <goods-list :list="goodsListData"></goods-list>
          <div class="no_data_block" v-if="goodsListData.length == 0 && !isLoading">
               <no-data-panel></no-data-panel>
          </div>  
      </div>
      
     
      <div>
          <infinite-load backgroundColor="#F6F6F6" v-if="goodsListData.length > 0" :scroll-target="scrollTarget" :is-loading="isLoading" :tipsShow="tipsShow" :is-nomore="isNomre" @load="getNextData"></infinite-load>
      </div>
  </div>
</template>

<script>
import HeaderBar from "@/components/header.vue";
import infiniteLoad from "@/components/infiniteLoad.vue";
import goodsList from '@/views/common/goodsList/goodsList.vue';
import { mapState, mapActions } from "vuex";
export default {
  components: {
    HeaderBar,
    infiniteLoad,
    goodsList,
  },
  created() {
      this.toggleLoading({flag:true});
      this.getUserIndex();
      this.sellerGoodsList(()=>{
          this.toggleLoading({flag:false});
      })
  },
  mounted() {
      let that = this;
      let maxtop = this.headerHeight*this.remLength;
      let tabTop = that.$refs.tab.getBoundingClientRect().top;
      this.tabTop = that.$refs.goods.getBoundingClientRect().top;
      let scale = tabTop/maxtop;
      window.addEventListener('scroll',()=>{
          let top = that.$refs.tab.getBoundingClientRect().top;
          if(maxtop+2<top){
              that.fixShow = false;
              that.headerType = 4;
              that.opacity = '';
              if(top/maxtop/scale<0.6){
                  that.headerType = 1;
                  that.opacity = '0.1';
              }
              if(top/maxtop/scale<0.55){
                  that.headerType = 1;
                  that.opacity = '0.2';
              }
              if(top/maxtop/scale<0.5){
                  that.headerType = 1;
                  that.opacity = '0.3';
              }
              if(top/maxtop/scale<0.45){
                  that.headerType = 1;
                  that.opacity = '0.4';
              }
              if(top/maxtop/scale<0.4){
                  that.headerType = 1;
                  that.opacity = '0.5';
              }
              if(top/maxtop/scale<0.35){
                  that.headerType = 1;
                  that.opacity = '0.6';
              }
              if(top/maxtop/scale<0.2){
                  that.headerType = 1;
                  that.opacity = '0.7';
              }
              if(top/maxtop/scale<0.2){
                  that.headerType = 1;
                  that.opacity = '0.8';
              }
              if(top/maxtop/scale<0.1){
                  that.headerType = 1;
                  that.opacity = '0.9';
              }
          }else{
            //   if(maxtop>=top){
                that.fixShow = true;
                that.headerType = 1;
                that.opacity = '1';
            //   }
          }
          if(maxtop==top){
              console.log(window.scrollT)
          }

      })
  },
  data() {
      return {
          headerIcon:'http://xianchaosectrade.oss-cn-hangzhou.aliyuncs.com/test/938d7f29167ae095.png',
          current:1,
          goodsListData:[],
          isLoading:false,
          tipsShow: true,
          scrollTarget: '#scrollPanel',
          userInfo:{},
          params:{status:'sale'},
          page:{
              size:10,
              current:1,
          },
          fixShow:false,
          opacity:'',
          headerType:4,
          tabTop:0,
      }
  },
  computed: {
      ...mapState({
        headerHeight: state => state.headerHeight,
        remLength: state => state.remLength,
      }),
  },
  methods: {
      ...mapActions(['toggleLoading','showMsg','showModal']),
      tab(type){
          if(this.current==type){
              return false;
          }
          this.current = type;
          if(type==1){
              this.params.status = 'sale'
          }else{
              this.params.status = 'sold'
          }
          this.page.current=1;
          let maxtop = this.headerHeight*this.remLength;
          
          if(this.fixShow){
              window.scrollTo(0,this.tabTop-this.$refs.tab.getBoundingClientRect().height-maxtop-.2*this.remLength)
          }
          
          this.toggleLoading({flag:true});
          this.sellerGoodsList(()=>{
              this.toggleLoading({flag:false});
          })
      },
      getUserIndex(){
          this.$ajax.userIndex({userId:this.$route.query.userId}).then(res=>{
              if(res.code=='0000'){
                  this.userInfo = res.data;
              }
          })
      },
      sellerGoodsList(done){
        this.$ajax.sellerGoodsList({queryBody:{userId:this.$route.query.userId,...this.params},page:this.page}).then(res=>{
            if(res.code=='0000'){
                if(this.page.current==1){
                    this.goodsListData = res.data.records;
                }else{
                    this.goodsListData = this.goodsListData.concat(res.data.records) ;
                }
                if(res.data.records.length!=10){
                    this.isNomre = true;
                }else{
                    this.isNomre = false;
                }
                done&&done();
            }
        })    
      },
      getNextData() {
          this.page.current++;
          this.isLoading = true;
          this.sellerGoodsList(()=>{
              this.isLoading = false;
          });
      },
  },
}
</script>

<style lang="less" scoped>
    .userHome{
        height: 100%;
        background: #F6F6F6;
        .top-relative{
            position: relative;
            height: 4.9rem;
            .top-bg{
                height: 4.9rem;
                width: 100%;
                filter: blur(14px);
                opacity: 0.4;
                position: absolute;
                top: 0;
                background-size: 120% auto !important;
            }
            .top-model{
                z-index: 1;
                position: absolute;
                top: 0;
                background: rgba(0,0,0,0.55);
                width: 100%;
                height: 4.9rem;
                .header-icon{
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 50%;
                    background: #666;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 1.2rem auto 0;
                    img{
                        width: 1.48rem;
                        height: 1.48rem;
                        border-radius: 50%;
                    }
                }
                p{
                    color: #fff;
                    text-align: center;
                    &.user-num{
                        line-height: .48rem;
                        color: #fff;
                        font-size: .36rem;
                        margin-top: .2rem;
                        font-weight:500;
                    }
                    &.describe{
                        margin-top: .04rem;
                        font-size: .24rem;
                        line-height:.32rem;
                        font-weight:400;
                    }
                    &.auth{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: .22rem;
                        height:.36rem;
                        width: 1.12rem;
                        border:.02rem solid rgba(255,255,255,1);
                        border-radius:.04rem;
                        margin: .16rem auto 0;
                        font-weight:400;
                        img{
                            margin-right: .02rem;
                            width: .22rem;
                            height: .24rem;
                        }
                    }
                }
            }
        }
        .no-auth-height{
            height: 4.34rem !important;
        }
        .tabs{
            display: flex;
            align-items: center;
            justify-content: center;
            height: .88rem;
            background: #fff;
            .tab-item{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .28rem;
                color: #666666;
                height: 100%;
                position: relative;
                font-weight:400;
                span{
                    margin-left: .04rem;
                }
                &.active{
                    &::after{
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        margin-left: -.54rem;
                        content: '';
                        width:1.08rem;
                        height:.06rem;
                        background: #14C878;
                    }
                }
            }
        }
        .no_data_block{
            margin-top: 1rem;
        }
        .padding15{
            padding-left: .2rem;
            margin-top: .2rem;
            min-height: 100%;
            background: #F6F6F6;
        }
        .fixed{
            position: fixed;
            left: 0;
            width: 100%;
            background: #fff;
            z-index: 222;
        }
    }
</style>